moveable一个可拖拽、缩放、旋转、对齐的库 |
您所在的位置：网站首页 › vue 旋转 › moveable一个可拖拽、缩放、旋转、对齐的库 |
moveable一个可拖拽、缩放、旋转、对齐的库
|
啥也不说 先上效果图
moveable是一个可拖动的、可调整大小的、可缩放的、可旋转的、可弯曲的、可收缩的、可分组的、可对齐的一个插件，包含了不同框架的版本 这边技术栈是React,直接在React中将需要拖动的元素绑定到moveable上即可实现，对该元素的拖动，调整大小，旋转，对齐等操作 实现步骤 *注意点react和react-dom版本不能超过18，我这边是用的17 1.下载依赖npm i react-moveable 2.使用moveable 拖拽 export default function MoveItem () { const [target, setTarget] = useState(null) const [frame, setFrame] = useState({ translate: [0,0], }); useEffect(() => { setTarget(document.querySelector('.target')) }, []) // 拖拽 function handleDragStart (e) { e.set(frame.translate); } function handleDrag (e) { frame.translate = e.beforeTranslate; e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`; } return ( ) } 复制代码 拖拽设置边界 export default function MoveItem () { const [target, setTarget] = useState(null) const [frame, setFrame] = useState({ translate: [0,0], }); let [snapContainer, setSnapContainer] = useState(null) let [dropBounds, setDropBounds] = useState([]) useEffect(() => { setTarget(document.querySelector('.target')) setSnapContainer(document.querySelector('.main')) let dom = document.querySelector('.center-drop') // getBoundingClientRect()获取元素到窗口的距离 dropBounds = dom.getBoundingClientRect() setDropBounds({ top: 0, left: 0, right: dropBounds.width, bottom: dropBounds.height, }) }, []) // 拖拽 function handleDragStart (e) { e.set(frame.translate); } function handleDrag (e) { frame.translate = e.beforeTranslate; e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`; } return ( ) } 复制代码 拖拽+缩放 export default function MoveItem () { const [target, setTarget] = useState(null) const [frame, setFrame] = useState({ translate: [0,0], }); let [snapContainer, setSnapContainer] = useState(null) let [dropBounds, setDropBounds] = useState([]) useEffect(() => { setTarget(document.querySelector('.target')) setSnapContainer(document.querySelector('.main')) let dom = document.querySelector('.center-drop') // getBoundingClientRect()获取元素到窗口的距离 dropBounds = dom.getBoundingClientRect() setDropBounds({ top: 0, left: 0, right: dropBounds.width, bottom: dropBounds.height, }) }, []) // 拖拽 function handleDragStart (e) { e.set(frame.translate); } function handleDrag (e) { frame.translate = e.beforeTranslate; e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`; } // 缩放 function handleResizeStart (e) { e.setOrigin(["%", "%"]); e.dragStart ;; e.dragStart.set(frame.translate); } function handleResize (e) { const beforeTranslate = e.drag.beforeTranslate; frame.translate = beforeTranslate; e.target.style.width = `${e.width}px`; e.target.style.height = `${e.height}px`; e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`; } return ( ) } 复制代码 拖拽+缩放+旋转旋转和拖拽都是设置的transfrom属性来实现的，旋转和拖拽同时存在时旋转会把拖拽覆盖，拖拽会把旋转覆盖，需要一起设置才能一起生效transform: translate(10px,10px) rotate(45deg)。 export default function MoveItem () { const [target, setTarget] = useState(null) const [frame, setFrame] = useState({ translate: [0,0], rotate: 0 }); let [snapContainer, setSnapContainer] = useState(null) let [dropBounds, setDropBounds] = useState([]) useEffect(() => { setTarget(document.querySelector('.target')) setSnapContainer(document.querySelector('.main')) let dom = document.querySelector('.center-drop') // getBoundingClientRect()获取元素到窗口的距离 dropBounds = dom.getBoundingClientRect() setDropBounds({ top: 0, left: 0, right: dropBounds.width, bottom: dropBounds.height, }) }, []) // 拖拽 function handleDragStart (e) { e.set(frame.translate); } function handleDrag (e) { frame.translate = e.beforeTranslate; e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px) rotate(${frame.rotate}deg)`; } // 缩放 function handleResizeStart (e) { e.setOrigin(["%", "%"]); e.dragStart ;; e.dragStart.set(frame.translate); } function handleResize (e) { const beforeTranslate = e.drag.beforeTranslate; frame.translate = beforeTranslate; e.target.style.width = `${e.width}px`; e.target.style.height = `${e.height}px`; e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`; } // 旋转 function handleRotateStart (e) { e.set(frame.rotate); } function handleRotate (e) { frame.rotate = e.beforeRotate; target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px) rotate(${e.beforeRotate}deg)` } return ( ) } 复制代码 拖拽+缩放+旋转+对齐实现对齐辅助线和停靠需要一个elementGuidelines来放置需要与之对齐的dom元素列表 return ( 对齐我 对齐我 ) 复制代码 标线如果需要在整个容器加标线对齐，设置 verticalGuidelines={[0,200,400]} horizontalGuidelines={[0,200,400]} 复制代码演示项目的gitee地址，如有帮助，欢迎点赞。 moveable还有其他很多功能，如Groupable、Warpable、selectto等，可以根据文档来一一实现 moveable的github地址 moveable的文档地址 moveable的Demo地址 moveable的单个演示地址 |
【本文地址】
今日新闻 |
推荐新闻 |